<template>
  <view class="w100p pr common_wrap">
    <CommonHeader :title="typeTranslate == 1 ? '线下翻译' : '问询服务'" color="#262728" backgroundColor="rgba(255,255,255,.9)" :is-right="false"></CommonHeader>

    <view class="w100p flex-item oh">
      <scroll-view scroll-y class="w100p scroll-Y">
        <view class="w100p swiper_video" :style="{ top: +statusBarHeight + 44 + 'px' }">
          <swiper class="w100p swiper" circular :indicator-dots="true" indicator-color="#9B969A"
            indicator-active-color="#fff" :circular="true">
            <swiper-item v-if="!!currentVideo">
              <view class="pr video_wrap">
                <video id="myVideo" class="w100p  palyxxx" :src="currentVideo" :show-center-play-btn="true"
                  object-fit="cover" play-btn-position="center" :controls="true" :autoplay="true" muted
                  :poster="currntMainPic">
                </video>
                <view class="video-wrapxx">
                  <image :src="currntMainPic" mode="aspectFill"></image>
                </view>
                <cover-view v-show="isShow" class="pa play_wrap" @click="playsHeader(currentVideo)">
                  <view class="icon_wrap">
                    <u-icon name="play-right-fill" color="#fff" size="46"></u-icon>
                  </view>
                </cover-view>

              </view>
            </swiper-item>
            <swiper-item v-for="(item, index) in list" :key="index">
              <image class="w100p img" :src="item.path" mode="aspectFill" @click="amplifyImg(item.path)"></image>
            </swiper-item>
          </swiper>

        </view>
        <view :style="{ marginTop: getTopR() }"></view>
        <view class="common_content pr w100p">
          <view class="w100p shop_card ">
            <view class="card_wrap">
              <!-- 上部分  -->
              <view style="height: 180rpx;" class="top-sjhowxx">
                <view class="base-info-xx" v-if="goodsInfo.member" @click="onGoPersonDetail(goodsInfo.member)">
                  <view class="left-avatar">
                    <view class="avatar-w">
                      <view class="avatar">
                        <image :src="goodsInfo.member.avatar" mode="aspectFill"></image>
                      </view>
                      <view class="country">
                        <image :src="createNational(goodsInfo.country).imgurl" mode="aspectFill"></image>
                      </view>
                    </view>
                    <view class="desc-avatar">
                      <view class="show">
                        <view class="name ellipsis_one">{{ goodsInfo.member.username || $t('暂无') }}</view>
                        <view class="vip-w">
                          <image :src="memberLevel(goodsInfo.member && goodsInfo.member.level).imgurl" style="width: 24rpx;height: 24rpx;" ></image>
                          <!-- <text>vip</text> -->
                        </view>
                      </view>
                      <view class="start">
                        <uni-rate :value="goodsInfo.rating" size="20" margin="8" activeColor="#FFE05F"
                          color="#DBDBDB" readonly/>
                      </view>
                    </view>
                  </view>
                  <view class="staxx">
                    <!-- v-if="goodsInfo.member && goodsInfo.member.level != 0" -->
                    <image :src="memberLevel(goodsInfo.member && goodsInfo.member.level).imgurl" mode="heightFix"/>
                  </view>
                </view>
              </view>
              <view class="bottom-section">
                <view class="btn" @click="onCall">{{$t('发起视频通话')}}</view>
                <view class="add" @click="onCollection">{{ goodsInfo.is_guanzhu == 0 ? $t('+关注') : $t('已关注') }}</view>
              </view>
            </view>
            <view class="men-cen" @click="onPayLink" v-if="goodsInfo.is_pay_score == 0 && goodsInfo.user_id != currentUserId">
              {{$t('支付')}}{{ goodsInfo.score }}{{$t('积分，立即与他取得联系')}}
            </view>
          </view>
          <cover-view class="pa swiper_wrap"></cover-view>
        </view>


        <view class="content-wrappx">
          <view class="title-w">
            <view class="name">{{ goodsInfo.title }}</view>
            <view class="right-see">
              <image src="/static/caigou/eyes.png"></image>
              <text>{{ goodsInfo.num }}</text>
            </view>
          </view>

          <view class="desc">
             <text>{{ goodsInfo.content }}</text>
          </view>

        </view>


      </scroll-view>
    </view>



    <!-- 底部操作栏 -->

    <view class="btn-wrapp" v-if="goodsInfo.user_id == currentUserId && currentUserId">
      <view class="del" @click="onDeleteService">{{$t('删除')}}</view>
      <view class="del active" @click="onChangeQuestion">{{$t('修改')}}</view>
    </view>



    <!-- 播放视频 -->
    <uni-popup ref="popupVideo" type="center" background-color="#000" mask-background-color="#000" class="popvexxx">
      <view class="wrapper-video">
        <video id="mainVideo" :src="playVideo" :show-center-play-btn="true" object-fit="cover"
          play-btn-position="center" :controls="true" :autoplay="true" class="video-main">
        </video>
      </view>
    </uni-popup>

    <!-- 图片放大 -->
    <uni-popup ref="popup" class="common_pop" mask-background-color="rgba(0,0,0,1)">
      <view class="w100p">
        <image class="w100p" :src="commonImg" mode="widthFix" @click="closePop"></image>
      </view>
    </uni-popup>

    <!-- 支付积分 isShowPoint  -->
    <!-- 积分 -->
    <view v-if="isShowPoint">

      <u-popup :show="isShowPoint" @close="onClose" round="34">
        <view class="pop-wrapper">
          <view class="headerxx">
            <image src="/static/caigou/chacha.png" @click="onClose" />
          </view>

          <template v-if="payLink">
            <view class="uls">
              <view class="li">
                <view class="txt">{{$t('本次支付积分')}}</view>
                <view class="time">{{ goodsInfo.score }}{{$t('积分')}}</view>
              </view>
            </view>
            <view class="btn" @click="confirmJifen">{{$t('支付积分')}}</view>
          </template>


          <!-- 二次确认 -->
          <template v-else>
            <view class="second-confirm">
              <view class="tile">{{$t('账户积分')}}</view>
              <view class="defaul-ti">{{$t('预计本次将于')}}{{ serviceTime }}分钟后{{$t('积分')}}消耗完毕，为确保您的{{$t('视频')}}通话不被{{$t('中')}}断,建议您充{{$t('值')}}足够的{{$t('积分')}}后再{{$t('发起视频通话')}}</view>
            </view>

            <view class="btns">
              <view class="btxn" @click="goJIfen">{{$t('充值积分')}}</view>
              <view class="btxn blue" @click="onVideoCall">{{$t('发起视频通话')}}</view>
            </view>
          </template>

        </view>
      </u-popup>
    </view>

  </view>
</template>

<script>
import {
  mapState
} from 'vuex';
import {
  IMAGE_URL,
} from "@/config/app"

import CommonHeader from "@/pages/translate/components/common-header.vue";
import { state_info, state_delete, request_minute, state_pay_score, state_guanzhu } from '@/api/state.js';
import {  request_minute as request_minutes } from '@/api/basic.js';
import { isMessageGo,memberLevel,createNational } from '@/utils/tool.js';

export default {
  data() {
    return {
      statusBarHeight: uni.getStorageSync("statusBarHeight"),
      videos: null, // 播放ref
      playVideo: '',
      commonImg: '',
      currntMainPic: '',
      currentVideo: '',
      isShow: false,
      historyList: [], //浏览记录列表
      list: [],
      product: {},
      tabList: [{
        title: this.$t('价格最低'),
      }, {
        title: this.$t('价格最高'),
      }],
      isShowPoint: false,
      goods_id: '',
      goodsInfo: {},
      currentUserId: uni.getStorageSync('user_id'),
      payLink: true,
      serviceTime: 0,
      typeTranslate: 0, // 1 线下 0 是线上
    }
  },
  components: {
    CommonHeader,
  },
  methods: {
    createNational,
    memberLevel,
    // 拨打视频
    onVideoCall() {
      this.isShowPoint = false;
      request_minutes({
				user_id: uni.getStorageSync("user_id"),
        target_id: this.goodsInfo.user_id,
			}).then(res => {
				if (res.data.data.flag == 1) {
          this.isMessageGo({
            action: 'call',
            data: {
              userId: this.goodsInfo.user_id,
              type: res.data.data.type || 1,
            },
          })
				} else {
          uni.showToast({
            title: this.$t('积分不足，请充值积分'),
            icon: 'none',
          })
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/vip/scorePoint',
						})
					}, 500)
				}
			})
    
    },
    goJIfen() {
      this.isShowPoint = false;
      uni.navigateTo({
        url:'/pages/vip/scorePoint',
      })
    },
    // 个人详情
    onGoPersonDetail(item) {
      uni.navigateTo({
        url:'/pages/myPersonPage/index?targetUserId=' + item.id,
      })
    },
    // 发起视频通话
    async onCall() {
      if (this.goodsInfo.user_id == this.currentUserId) {
        uni.showToast({
          title: this.$t('不能给自己打电话'),
          icon: 'none',
        })
        return
      }
      try {
        let res = await request_minute({
          user_id: uni.getStorageSync('user_id'),
          id: this.goods_id,
        })
        this.serviceTime = res.data.data.data || 0;
        if (this.serviceTime == 0) {
          uni.showToast({
            title: '积分不足,请去充值积分',
            icon: 'none',
          })
          setTimeout(() => {
            uni.navigateTo({
              url:'/pages/vip/scorePoint',
            })
          }, 300);
          return;
        }
        this.payLink = false;
        this.isShowPoint = true;
      } catch (error) {
        console.log(error)
      }


    },
    async onCollection() {
      if (this.goodsInfo.user_id == this.currentUserId) {
        uni.showToast({
          title: this.$t('自己不能关注自己'),
          icon: 'none',
        })
        return
      }
      try {
        let res = await state_guanzhu({
          user_id: uni.getStorageSync('user_id'),
          guanzhu_user_id: this.goodsInfo.user_id
        })

        if (res.data.code == 200) {
          uni.showToast({
            title: this.goodsInfo.is_guanzhu == 0 ? this.$t('关注成功') : this.$t('取消关注'),
            icon: 'none',
          })
          setTimeout(() => {
            this.getData();
          }, 700);
        }
      } catch (error) {

      }
    },
    async confirmJifen() {
      this.isShowPoint = false;
      uni.showModal({
        title: this.$t('提示'),
        content: '确定支付积分吗？',
        success: (res) => {
          if (res.confirm) {
            state_pay_score({
              user_id: uni.getStorageSync('user_id'),
              score: this.goodsInfo.score,
              pay_user_id: this.goodsInfo.user_id,
              id: this.goodsInfo.id,
            }).then((res) => {
              if (res.data.code == 200) {
                this.goodsInfo.is_pay_score = 1;
                uni.showToast({
                  title: '支付成功'
                })
                setTimeout(() => {
                  this.getData();
                }, 700);
              } else if (res.data.code == -1) {
                uni.showToast({
                  title: res.data.message + this.$t('请去充值积分'),
                  icon: 'none'
                })
              }

            })
          }

        },
      })
    },
    // 支付积分
    onPayLink() {
      this.isShowPoint = true;
      this.payLink = true;
    },
    // 删除服务
    async onDeleteService() {
      uni.showModal({
        title: this.$t('提示'),
        content: '确定删除吗？',
        success: (res) => {
          if (res.confirm) {
            state_delete({
              id: this.goods_id,
            }).then((res) => {
              if (res.data.code == 200) {
                uni.showToast({
                  title: '删除成功'
                })
                setTimeout(() => {
                  uni.navigateBack({})
                }, 400);
              } else {
                uni.showToast({
                  title: res.data.message,
                  icon: 'none'
                })
              }

            })
          }
        }
      })
    },
    // 修改问询
    onChangeQuestion() {
      uni.navigateTo({
        url: '/pages/translate/publishService/index?id=' + this.goods_id + '&typeTranslate=' + this.typeTranslate,
      })
    },
    onClose() {
      this.isShowPoint = false
    },
    // 跳转供应商报价
    onGoSuppier() {
      uni.navigateTo({
        url: '/pages/caigou/supplierQuotation/index',
      })
    },
    onParticipate() {
      // 跳转发布页面
      uni.navigateTo({
        url: '/pages/caigou/publishInfo/index',
      })
    },
    getTopR() {
      return `calc(${+this.statusBarHeight}px + 44px + 400rpx)`
    },
    // 播放头部视频
    playsHeader(video) {
      // 判断安卓
      const systemInfo = uni.getSystemInfoSync();
      // 判断是否为 Android 系统
      if (systemInfo.platform === 'android') {
        this.playVideo = video;
        this.$refs.popupVideo.open()
        return;
      }
      this.videos.requestFullScreen();
      this.$nextTick(() => {
        this.videos.play();
      })
    },
    // 关闭图片弹窗
    closePop() {
      this.$refs.popup.close();
    },
    // 图片放大
    amplifyImg(imgUrl) {
      if (!imgUrl) return;
      this.commonImg = imgUrl;
      this.$refs.popup.open();
    },
    // 获取数据
    async getData() {
      uni.showLoading({
        title: 'loading...',
      })
      try {
        let res = await state_info({
          id: this.goods_id,
          user_id: uni.getStorageSync('user_id')
        })
        if (res.data.code == 200) {
          this.goodsInfo = res.data.data.data;
          this.list = this.goodsInfo.image.map((ele) => {
            ele.path = this.getImageUrl(ele.path);
            return ele;
          })
          this.currntMainPic = this.list[0].path;
          this.currentVideo = this.getImageUrl(this.goodsInfo.video[0].path);
          if (this.currentVideo) {
            this.isShow = true;
          }
        }
        uni.hideLoading({})
      } catch (error) {
        uni.hideLoading({})
      }


    },
  },

  onLoad(options) {
    this.goods_id = options.goods_id;
    this.typeTranslate = options.typeTranslate || 0;
    this.videos = uni.createVideoContext('myVideo');
    this.getData();
  },
}
</script>

<style scoped lang="scss">
@import '@/pages/translate/common/common.scss';
@import './index.scss';
</style>